import React from 'react'
import clsx from 'clsx'

function Input (props) {
  const {
    type = 'text',
    className,
    defaultValue = '',
    onChange = () => {},
    ...rest
  } = props
  const [value, setValue] = React.useState(defaultValue)

  const handleChange = (e) => {
    setValue(e.target.value)
    onChange(e)
  }

  return (
    <input
      type={type}
      value={value}
      className={clsx(
        'block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50',
        className,
      )}
      onChange={handleChange}
      {...rest}
    />
  )
}

export default Input